<template>
    <!-- 上面搜索栏部分 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="submitFn">查询搜索</el-button>
            </div>
        </div>

        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!-- 在有多个搜索框的情况下添加全部清空功能 -->
            <el-form ref="searchFormRef" @submit.prevent="submitFn" :model="listParams">
                <el-form-item label="输入搜索:" label-width="120px" prop="id">
                    <!-- @keyup.enter 回车事件 -->
                    <!-- <el-input v-model="listParams.keyword" placeholder="请输入账号、姓名" @keyup.enter="submitFn" /> -->
                    <el-input placeholder="服务单号" v-model="listParams.id" />
                </el-form-item>

                <el-form-item label="处理状态:" label-width="120px" prop="status">
                    <el-select v-model="listParams.status" class="m-2" placeholder="全部">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="申请时间:" label-width="120px" prop="createTime">
                    <div class="demo-date-picker">
                        <el-date-picker v-model="listParams.createTime" type="date" placeholder="请选择时间"
                            :default-value="new Date(2010, 9, 1)" value-format="YYYY-MM-DD" />
                    </div>
                </el-form-item>

                <el-form-item label="操作人员:" label-width="120px" prop="handleMan">
                    <el-input placeholder="全部" v-model="listParams.handleMan" />
                </el-form-item>

                <el-form-item label="处理时间:" label-width="120px" prop="handleTime">
                    <div class="demo-date-picker">
                        <el-date-picker v-model="listParams.handleTime" type="date" placeholder="请选择时间"
                            :default-value="new Date(2010, 9, 1)" value-format="YYYY-MM-DD" />
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <!-- 数据列表 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
    </div>

    <!-- 订单数据表格 -->
    <el-table :data="list" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="id" label="服务单号" align="center" />
        <el-table-column prop="createTime" label="申请时间" width="200" align="center">
            <template #default="scope">
                {{ fomatDate(scope.row.createTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="memberUsername" label="用户账号" align="center" />
        <el-table-column prop="productRealPrice" label="退款金额" width="120" align="center" />
        <el-table-column prop="status" label="申请状态" width="120" align="center">
            <template #default="scope">
                {{ fomatStatus(scope.row.status) }}
            </template>
        </el-table-column>
        <el-table-column prop="handleTime" label="处理时间" width="200" align="center">
            <template #default="scope">
                {{ fomatDate(scope.row.createTime) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
                <el-button @click="router.push('/oms/returnApplyDetail?id=' + scope.row.id)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 批量操作和分页 -->
    <div class="bottom">
        <div class="left">
            <el-select v-model="value" class="m-2" placeholder="批量删除" @change="select">
                <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" @click="batchDelete">确定</el-button>
        </div>

        <!-- 底部分页 -->
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
                layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChagne"
                @current-change="currentChagne" :page-sizes="[5, 10, 15]" />
        </ElConfigProvider>
    </div>
</template>

<script setup lang='ts'>
import { user } from "@/api";
import { Tickets, Search } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ref, reactive, toRefs } from 'vue'
import { fomatDate, fomatStatus } from "@/utils"
import { FormInstance, ElMessageBox, ElMessage } from "element-plus"
import { useRouter } from "vue-router";

const value = ref('')

const options1 = [
    {
        value: '0',
        label: '待处理',
    },
    {
        value: '1',
        label: '退货中',
    },
    {
        value: '2',
        label: '已完成',
    },
    {
        value: '3',
        label: '已拒绝',
    },
]

const option = [
    {
        value: "批量删除",
        label: "批量删除"
    }
]

// 创建路由实例
const router = useRouter()

interface IState {
    list: IApplyParamsList[]
    total: number
    totalPage: number
    listParams: IReturnApplyParams
}

// 返回的参数
const state = reactive<IState>({
    list: [],
    total: 0,
    totalPage: 0,
    listParams: {
        createTime: null,
        handleMan: null,
        handleTime: null,
        id: null,
        pageNum: 1,
        pageSize: 10,
        receiverKeyword: null,
        status: null
    }

})


// 进行数据数据请求
const getReturnApply = () => {
    user.getReturnApplyApi(state.listParams).then((res) => {
        // console.log(res);
        state.list = res.data.list
        state.total = res.data.total
    })
}
getReturnApply()

// 搜索功能
const submitFn = () => {
    state.listParams.pageNum = 1
    getReturnApply()
}

// 重置功能
const searchFormRef = ref<FormInstance>();
const resetForm = () => {
    searchFormRef.value?.resetFields();
}

// 批量删除 ----------------------------------------

// 定义一个空数组来接受每一个勾选的id
const ids = ref<number[]>([])
const handleSelectionChange = (val: IApplyParamsList[]) => {
    ids.value = val.map(item => item.id)
    console.log(ids.value)
}

// 拿到选择器中的参数
const optVal = ref('')
const select = (val: string) => {
    // console.log(val);
    optVal.value = val
}

// 删除方法
const batchDelete = () => {
    if (optVal.value === "批量删除") {
        user.getApplyDeleteApi(ids.value).then((res) => {
            if (res.code === 200) {
                // console.log(res.data);
                ElMessageBox.confirm(
                    '是否要进行删除操作?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        ElMessage({
                            type: 'success',
                            message: '删除成功!',
                        })
                        getReturnApply()
                    })
                    .catch(() => {

                    })
            }
        })
    } else {
        ElMessage.warning("请选择需要进行的操作！")
    }
}


// 分页方法
const pageSizeChagne = () => {
    getReturnApply()
}

const currentChagne = () => {
    getReturnApply()
}


let { list, total, listParams } = toRefs(state)

</script>

<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 0px gray;
    margin-bottom: 20px;

    .el-form {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
    }

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .el-icon {
        margin-right: 10px;
    }

    .el-input {
        width: 215px;
    }

}

.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 2px #ccc;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}

.bottom {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .left {
        .el-button {
            margin-left: 10px;
        }
    }
}
</style>